<template >
<div id='tmpl'>
<!-- 1.0轮播图 -->
<mt-swipe :auto="2000">
	<mt-swipe-item v-for='(item,index) in list' :key='index'>
		<img :src="item.img" alt="">
	</mt-swipe-item>
</mt-swipe>

<!-- 2.0 九宫格 -->
<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<router-link to="/A">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">首页</div>
	                    </router-link>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<router-link to="/B">
		                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
		                    <div class="mui-media-body">邮件</div>
	                    </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<router-link to="/C">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">热门视频</div>
	                    </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<router-link to="/D">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">视频专区</div>
	                    </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	            		<router-link to="F">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">留言反馈</div>
	                    </router-link>
                    </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
	            		<router-link to="/E">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">联系我们</div>
	                    </router-link>
                    </li>
		           
		        </ul> 
		</div>

</div>
</template>

<script>

export default{
	data(){
		return {
			list:[]
		}
	},
	created(){
		this.getimgs();
	},
	methods:{
		getimgs:function(){
			var url = 'http://www.lovegf.cn:8899/api/getlunbo';
			this.$http.get(url).then(function(res){
				this.list = res.body.message;
			})
		}
	}
}
</script>


<style scoped>
.mint-swipe{
	height:300px;
}
.mint-swipe-item img{
	width:100%;
}

.mint-swipe-item{
	/*background-color:red;*/
	width:100%;
	height:300px;
}

.mui-icon-home:before,
.mui-icon-email:before,
.mui-icon-chatbubble:before,
.mui-icon-location:before,
.mui-icon-search:before,
.mui-icon-phone:before{
	content: "";
	display: inline-block;
	width: 50px;
	height: 50px;
	background-repeat: round;
}
.mui-icon-home:before{
	background-image: url('../../statics/imgs/1.png');
	
}
.mui-icon-email:before{
	background-image: url('../../statics/imgs/2.png');
	
}
.mui-icon-chatbubble:before{
	background-image: url('../../statics/imgs/3.png');
}
.mui-icon-location:before{
		background-image: url('../../statics/imgs/4.png');

}
.mui-icon-search:before{
	background-image: url('../../statics/imgs/5.png');

}
.mui-icon-phone:before{
		background-image: url('../../statics/imgs/6.png');

}
</style>